<template>
  <div>
    <Category></Category>
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      style="margin: 20px"
      v-show="!isAddorUpdataCard"
    >
      <template #header>
        <el-button
          type="primary"
          size="small"
          @click="addBtn"
          icon="el-icon-plus"
          :disabled="!category3Id"
          >添加属性</el-button
        >
      </template>
      <!-- card body -->
      <el-table stripe :data="attrInfoList">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column label="属性名称" prop="attrName" width="100">
        </el-table-column>
        <el-table-column label="属性值名称列表">
          <template v-slot="{ row }">
            <el-tag
              type="success"
              size="small"
              v-for="item in row.attrValueList"
              :key="item.id"
              style="margin: 0 5px 3px 0"
              >{{ item.valueName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="{ row }">
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-edit"
              @click="toEditBtn(row)"
            ></el-button>
            <template>
              <el-popconfirm
                title="确定删除该条信息？"
                @onConfirm="deleteAttr(row.id)"
              >
                <el-button
                  slot="reference"
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  style="margin-left: 8px"
                ></el-button>
              </el-popconfirm>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加属性或修改某一条属性弹窗 -->
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
      style="margin: 20px"
      v-show="isAddorUpdataCard"
    >
      <el-form label-width="80px" :inline="false" size="normal">
        <el-form-item label="属性名" size="normal">
          <el-input
            size="normal"
            clearable
            style="width: 260px"
            v-model="attrInfo.attrName"
          ></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" size="small" @click="addAttrItemBtn" :disabled="!attrInfo.attrName"
          >添加属性值</el-button
        >
        <el-button size="small" @click="">取消</el-button>
      </div>
      <el-table
        :data="attrInfo.attrValueList"
        border
        stripe
        style="margin: 20px 0"
      >
        <el-table-column type="index" width="100" label="序号" align="center" />
        <el-table-column label="属性值名称">
          <template v-slot="{ row,$index }">
            <el-input
              v-if="row.isEdit"
              ref="inputEl"
              v-model="row.valueName"
              placeholder="请编辑新的属性值"
              size="small"
              @blur="toLook(row,$index)"
            ></el-input>
            <span v-else @click="clickSpanToEdit(row)">{{ row.valueName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="{ row }">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click=""
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-button type="primary" size="small" @click="saveAttrInfo">保存</el-button>
        <el-button size="small" @click="cancelBtn">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import {cloneDeep} from "loadsh"
import { mapState } from "vuex";
import {
  reqGetAttrInfoList,
  reqDeleteAttr,
  reqAddOrUpdateAttr,
} from "@/api/product/attr";
export default {
  name: "Attr",
  data() {
    return {
      attrInfoList: [],
      isAddorUpdataCard: false,
      attrInfo: {
        //收集数据
        attrName: "",
        attrValueList: [],
        categoryId: 0,
        categoryLevel: 0,
        id: 0,
      },
    };
  },
  computed: {
    ...mapState("category", ["category1Id", "category2Id", "category3Id"]),
  },
  methods: {
    //初始化数据
    async initAttrList() {
      //初始获取数据
      if (!this.category1Id && !this.category2Id && !this.category3Id) return;
      try {
        const result = await reqGetAttrInfoList(
          this.category1Id,
          this.category2Id,
          this.category3Id
        );
        console.log(result);
        this.attrInfoList = result;
      } catch (error) {
        this.$message({
          message: message.error,
          type: "error",
        });
      }
    },
    //删除某一条属性值列表
    async deleteAttr(id) {
      try {
        await reqDeleteAttr(id);
        this.initAttrList();
        this.$message.success("删除成功!");
      } catch (error) {
        this.$message({
          message: error.message,
          type: "error",
        });
      }
    },
    //点击添加按钮事件回调
    addBtn() {
      this.isAddorUpdataCard = true;
      this.attrInfo = {
        //收集数据
        attrName: "",
        attrValueList: [],
        categoryId: this.category3Id,
        categoryLevel: 3,
      };
    },
    //点击添加属性事件回调函数
    addAttrItemBtn() {
      const newAttrItem = {
        isEdit: true, //是否可以编辑文本
        valueName: "",
      };
      this.attrInfo.attrValueList.push(newAttrItem);
      this.$nextTick(()=>{ //获取输入框光标
        this.$refs.inputEl.focus()
      })
    },
    //表单光标丢失事件
    toLook(row,index){
      const value = this.$refs.inputEl.value.trim()
      console.log(row);
      if(!value){
        this.attrInfo.attrValueList.splice(index,1)
      }
      row.isEdit = false
    },
    //点击编辑按钮事件回调
    toEditBtn(row){
      this.isAddorUpdataCard = true
      this.attrInfo = cloneDeep(row)
      this.attrInfo.attrValueList.forEach(item=>{
        console.log(item);
        this.$set(item,"isEdit",false)
      })
    },
    //点击span标签进入编辑状态
    clickSpanToEdit(row){
      console.log(row);
      row.isEdit = true
      this.$nextTick(()=>{ //获取输入框光标
        this.$refs.inputEl.focus()
      })
    },
    //点击取消按钮事件回调
    cancelBtn() {
      this.isAddorUpdataCard = false;
    },
    //点击保存提交数据
    async saveAttrInfo(){
      //整理数据 
      this.attrInfo.attrValueList.forEach(item=>{
        this.$delete(item,"isEdit")
      })
      try {
        await reqAddOrUpdateAttr(this.attrInfo)
        if(this.attrInfo.id){
          this.$message({
            message: '恭喜你，修改属性成功',
            type: 'success'
          })
        }else{
          this.$message({
            message: '恭喜你，添加属性成功',
            type: 'success'
          })
        }
        this.initAttrList()
      } catch (error) {
        this.$message({
          message: error.message,
          type: 'error'
        })
      }
      this.isAddorUpdataCard = false
    }
  },
  mounted() {
    this.initAttrList();
  },
  watch: {
    category3Id() {
      this.initAttrList();
    },
  },
};
</script>

<style lang="scss" scoped></style>
